<template>
  <div
    class="applicationcode"
    @click="goback"
  >
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    /> -->
    <div class="wrapper">

      <div
        ref="chartLine1"
        class="cardEcharts"
      />
    </div>
  </div>

</template>

<script>
import $api from '@/api/index'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      NewAddData: [],
      countData: []
    }
  },
  beforeCreate() {
    this.$dd.showTitleBar()
  },
  mounted() {
    // this.$dd.rotateView({
    //   showStatusBar: true, // 否显示statusbar
    //   clockwise: true, // 是否顺时针方向
    //   onSuccess: function(result) {
    //   }
    // })
    this.$dd.setTitle({
      title: '数据统计'
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
    this.countIsolate()
  },
  computed: {
    ...mapGetters([
      'reportId'
    ])
  },
  methods: {
    countIsolate() {
      $api.user.countIsolate({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.countData = res.data
        this.countSituationNewAdd()
      })
    },
    countSituationNewAdd() {
      $api.user.countSituationNewAdd({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.NewAddData = res.data
        this.drawLine1([this.countData, this.NewAddData])
      })
    },
    drawLine1(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine1)
      let arr = []
      if (val.length !== 0) {
        this.chartLine1 = true
        arr = [...val[0], ...val[1]]
      }
      var option = {
        yAxis: {
          type: 'category',
          data: ['隔离总人数', '隔离中人数', '昨日新增', '今日新增'],
          interval: 0
        },
        xAxis: {
          type: 'value'
        },
        series: [{

          data: arr,
          type: 'bar',
          barWidth: 30,
          barCategoryGap: '20%',
          itemStyle: { // 上方显示数值
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }]
      }
      myChart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
.applicationcode{
    width:100%;
    height:100%;
}
.cardEcharts{
      // width:calc(100% + 400px);
      width:100%;
      height:100vh;
      padding:20px 10px;
      box-sizing: border-box;
    }
</style>
